{% extends 'IcsocUIBundle::page.html.twig' %}
{% from 'IcsocUIBundle:Macro:actions.html.twig' import create %}
{% from 'IcsocUIBundle:Macro:formValidator.html.twig' import jqvalidator %}
{% form_theme form _self %}
{% block form_row -%}
    <div class="form-group{% if errors|length > 0  %} has-error{% endif %} {% if attr.hide is defined %}hide updatePass{% endif %}" >
        {{- form_label(form) -}}
        {{- form_widget(form) -}}
        {{- form_errors(form) -}}
    </div>
{%- endblock form_row %}
{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@gritter_css'
    '@multiselect_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{% block content %}
    <div class="page-content">
        <div class="row"></div>
            {% set agNumHelp = 'For landing system using account'|trans  %}
            {% set agPasswordHelp = 'Used to log in to the system using a password, default is 123456'|trans  %}
            {% set agNameHelp = 'The user does not set the corresponding permissions, user login after no menu display'|trans  %}
            {% set queHelp = 'Check the skill group that is for the user to manage and view the skill set of data'|trans  %}
            {% set groupHelp = 'Check the position for the user to manage and view the business groups data'|trans  %}
            {% set agRoleHelp = 'If adding the common management of users (such as business executives) is set to a non agents, non seat cannot login front CRM'|trans  %}
            {% set crmHelp = 'Not limited to the user can view all data, the skill set for user to view the skill set of the data, and reclined at the table view of their data to the user on'|trans  %}
            {% set typeHelp = 'Not limited to the user can view all data, the skill set for user to view the skill set of the data, and reclined at the table view of their data to the user only'|trans  %}
            {{ form_start(form, {'attr':{'id':'agent-form'}}) }}
                {{ form_row(form.ag_num, {'help':agNumHelp}) }}
                {% if agentId is not empty %}
                    <div class="form-group">
                        <label for="agent_info_form_ag_password_first" class="col-sm-3 control-label no-padding-right">{{ 'Old password'|trans }} </label>
                        <div class="col-sm-9">
                            <span>*******</span>
                            <a href="#" onclick="fn_reset()">修改密码</a>
                        </div>
                    </div>
                {% endif %}
                {{ form_row(form.ag_password, {'help':agPasswordHelp}) }}
                {{ form_row(form.ag_name) }}
                {{ form_row(form.ag_nickname) }}
                {{ form_row(form.user_role, {'help':agNameHelp}) }}
                {{ form_row(form.belong_queues) }}
                {% if isEnableGroup %}
                    {{ form_row(form.group_id) }}
                {% endif %}
                {{ form_row(form.select_data) }}
                {{ form_row(form.ag_status) }}
                <div class="hidden" id="select_data">
                    <div class="col-xs-1"></div>
                    <div class="col-xs-11">
                        {#{% if vccId == 2000135 %}#}
                            {#{{ form_row(form.user_type, {'help':typeHelp}) }}#}
                            {#{% if roleGrade < 2 %}#}
                                {#{{ form_row(form.user_queues, {'help':queHelp}) }}#}
                                {#{% if isEnableGroup %}#}
                                    {#{{ form_row(form.user_groups, {'help':groupHelp}) }}#}
                                {#{% endif %}#}
                            {#{% endif %}#}
                        {#{% endif %}#}
                        {{ form_row(form.ag_role, {'help':agRoleHelp}) }}
                        {{ form_row(form.agent_authority) }}
                        <div class="hidden" id="agent_authority">
                            <div class="col-xs-1"></div>
                            <div class="col-xs-11">
                                 {{ form_row(form.crm_datarole, {'help':crmHelp}) }}
                            </div>
                        </div>
                    </div>
                </div>
              {{ create(path('icsoc_agent_index',{'page':page,'rows':rows,'filter':filter})) }}
            {{ form_end(form) }}
    </div>
{% endblock %}
{% block footer %}
    {% javascripts
    '@jqvalidate_js'
    '@gritter_js'
    '@common_js'
    '@multiselect_js'
    '@IcsocUIBundle/Resources/public/plugin/quicksearch/jquery.quicksearch.js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script>
        function switchOption(objName)
        {
            var name = "agent_info_form["+objName+"]";
            var objs = $("input[name='"+name+"']");
            var val = 0;
            for (var i=0; i<objs.length;i++) {
                if (objs[i].checked) {
                    val = $(objs[i]).val();
                }
            }
            if (val == 0) {
                $('#'+objName).attr('class', 'show form-group');
            } else {
                $('#'+objName).attr('class', 'hidden form-group');
            }
        }
        $('#agent-form').on("submit", function(){
            var agId = $('#agent_info_form_id').val();
            var agRole = $("input[name='agent_info_form[ag_role]']:checked").val();
            //添加的是时候才验证；
            if ($("#agent-form").valid() && agId.length<1 && agRole != -1) {
                var flag = false;
                $.ajax({
                    type: 'post',
                    async: false,
                    url: '{{ path('icsoc_agent_allow_num') }}',
                    data: {'num':1},
                    success: function (response) {
                        if (response.error) {
                            message = '{{ 'The number of seats exceed the standard, but also add'|trans }}:'+response.num;
                            gritterAlert('{{ 'Prompt'|trans }}', '{{ 'The number of seats exceed the standard, but also add'|trans }}:'+response.num, 'error');
                            flag = false;
                        } else {
                            flag = true;
                        }
                    }
                });
                return flag;
            }
        });
        $('#agent-form').validate({
            {{ jqvalidator() }}
            errorPlacement: function(error, element){
                error.attr('class','help-block col-xs-7 col-sm-5');
                if(element.is(":radio")){
                    error.appendTo( element.parent().parent().parent());
                    $(element.parent().parent().parent().parent()).attr('class','form-group has-error');
                } else if (element.is(":checkbox")) {
                    error.appendTo ( element.next() );
                } else {
                    error.appendTo(element.parent());
                    $(element.parent().parent()).attr('class','form-group has-error');
                }

            },
            rules: {
                'agent_info_form[ag_num]': {required:true, remote:{
                        url: '{{ path('icsoc_agent_check') }}',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            ag_num: function(){
                                return $('#agent_info_form_ag_num').val();
                            },
                            agent_id: "{{ agentId }}"
                        }
                },
                    isAgNum: true
                },
                'agent_info_form[ag_password][first]': {required:{% if agentId %}false{% else %}true{% endif %} ,minlength:6},
                'agent_info_form[ag_password][second]': {required:{% if agentId %}false{% else %}true{% endif %},equalTo:'#agent_info_form_ag_password_first'},
                'agent_info_form[ag_name]': {'required':false},
                'agent_info_form[user_role]': {'required':true},
                'agent_info_form[belong_queues]': {'required':false},
                'agent_info_form[group_id]': {'required':false},
                'agent_info_form[ag_role]': {'required':true}
            },
            messages: {
                'agent_info_form[ag_num]': {required:'{{ 'The user number can not be empty'|trans }}',remote:'{{ 'Employee number already exists'|trans }}',
                    isAgNum:'{{ 'Agents work number can only be numbers or letters.'|trans }}'},
                'agent_info_form[ag_password][first]': {'required':'{{ 'Password can not be empty'|trans }}',minlength:'{{ 'The password is not less than six'|trans }}'},
                'agent_info_form[ag_password][second]': {'required':'{{ 'Password can not be empty'|trans }}',equalTo:'{{ 'Please re - enter the same value'|trans }}'},
                'agent_info_form[user_role]': '{{ 'Please select a character'|trans }}',
                'agent_info_form[ag_role]': '{{ 'This field is required'|trans }}'
            }
        });
        jQuery.extend(jQuery.validator.messages, {
            required:'{{ 'This field is required'|trans }}'
        });
        $(document).ready(function (){
            $('.multiple-select').multiSelect({
                selectableHeader:"<div class='custom-header'>{{ 'Selectable'|trans }}</div><input type='text' class='col-xs-12 col-sm-12' autocomplete='off' placeholder='搜索'>",
                selectionHeader:"<div class='custom-header'>{{ 'Selected'|trans }}</div><input type='text' class='col-xs-12 col-sm-12' autocomplete='off' placeholder='搜索'>",
                cssClass:"col-xs-10 col-sm-5",
                afterInit: function(ms){
                    var that = this,
                            $selectableSearch = that.$selectableUl.prev(),
                            $selectionSearch = that.$selectionUl.prev(),
                            selectableSearchString = '#'+that.$container.attr('id')+' .ms-elem-selectable:not(.ms-selected)',
                            selectionSearchString = '#'+that.$container.attr('id')+' .ms-elem-selection.ms-selected';
                    console.log(selectableSearchString);
                    console.log(selectionSearchString);
                    that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
                            .on('keydown', function(e){
                                if (e.which === 40){ //40为向下的箭头;
                                    that.$selectableUl.focus();
                                    return false;
                                }
                            });

                    that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
                            .on('keydown', function(e){
                                if (e.which == 40){
                                    that.$selectionUl.focus();
                                    return false;
                                }
                            });
                },
                afterSelect: function(){
                    this.qs1.cache();
                    this.qs2.cache();
                },
                afterDeselect: function(){
                    this.qs1.cache();
                    this.qs2.cache();
                }
            });
            {% if isEnableGroup %}
                {% if userType is defined and userType == 3 %}
                $("#agent_info_form_user_queues").parent().parent().addClass('hidden');
                {% else %}
                $("#agent_info_form_user_groups").parent().parent().addClass('hidden');
                {% endif %}
            {% endif %}
            $("input:radio[name='agent_info_form[user_type]']").on("click", function(){
                var val = $(this).val();
                fn_date(parseInt(val));
            })
        });
        //坐席工号验证
        jQuery.validator.addMethod("isAgNum", function(value, element) {
               var phone = /^([a-zA-Z]|\d)+$/; //只让母或数字
               return this.optional(element) || (phone.test(value));
        }, "");
        function fn_date(val)
        {
            switch(val)
            {
                case 0:
                    $('#agent_info_form_user_queues').attr("disabled",'disabled');
                    $('#agent_info_form_user_queues').multiSelect("refresh");
                {% if isEnableGroup %}
                    $('#agent_info_form_user_groups').attr("disabled",'disabled');
                    $('#agent_info_form_user_groups').multiSelect("refresh");
                {% endif %}
                {% if agentType is defined and agentType != 2 %}
                    $('#agent_info_form_ag_role_2').removeAttr('disabled');
                {% endif %}
                    $('#agent_info_form_ag_role_0').removeAttr("checked");
                    $('#agent_info_form_ag_role_1').prop("checked", "checked");
                    break;
                case 1:
                {% if isEnableGroup %}
                    $("#agent_info_form_user_groups").parent().parent().addClass('hidden');
                    $("#agent_info_form_user_queues").parent().parent().removeClass('hidden');
                {% endif %}
                    $('#agent_info_form_user_queues').removeAttr("disabled");
                    $('#agent_info_form_user_queues').multiSelect("refresh");
                    $('#agent_info_form_ag_role_2').attr("disabled", "disabled");
                    $('#agent_info_form_ag_role_2').removeAttr('checked');
                    $('#agent_info_form_ag_role_0').prop("checked", "checked");
                    break;
                case 2:
                    $('#agent_info_form_user_queues').attr("disabled",'disabled');
                    $('#agent_info_form_user_queues').multiSelect("refresh");
                {% if isEnableGroup %}
                    $('#agent_info_form_user_groups').attr("disabled",'disabled');
                    $('#agent_info_form_user_groups').multiSelect("refresh");
                {% endif %}
                    $('#agent_info_form_ag_role_2').attr("disabled", "disabled");
                    $('#agent_info_form_ag_role_2').removeAttr('checked');
                    $('#agent_info_form_ag_role_0').prop("checked", "checked");
                    break;
                {% if isEnableGroup %}
                case 3:
                    $("#agent_info_form_user_queues").parent().parent().addClass('hidden');
                    $("#agent_info_form_user_groups").parent().parent().removeClass('hidden');
                    $('#agent_info_form_user_groups').removeAttr("disabled");
                    $('#agent_info_form_user_groups').multiSelect("refresh");
                    $('#agent_info_form_ag_role_2').attr("disabled", "disabled");
                    $('#agent_info_form_ag_role_2').removeAttr('checked');
                    $('#agent_info_form_ag_role_0').prop("checked", "checked");
                    break;
                {% endif %}
            }
        }
        function fn_reset()
        {
            $('.updatePass').attr("class", "form-group");
        }
        $(document).ready(function (){
            {% if (userType is defined and userType != 0) or (agentType is defined and agentType == 2) %}
                //把ag_role=1的禁用；
                $("#agent_info_form_ag_role_2").attr("disabled","disabled");
            {% endif %}
        });
    </script>
    <style>
        .custom-header{
            text-align: center;
            padding: 3px;
            background: #E5E5E5;
        }
    </style>
{% endblock %}